<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HID设备控制器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" rel="stylesheet">
    <style>
        .keyboard-btn {
            @apply w-16 h-16 rounded-lg flex items-center justify-center text-2xl border-2 transition-colors;
        }
        .connect-status {
            @apply px-4 py-2 rounded-full font-bold text-lg;
        }
    </style>
</head>
<body class="bg-gray-100 font-sans">
    <div class="container mx-auto p-4">
        <h1 class="text-3xl font-bold text-center mb-8">HID设备远程控制器</h1>

        <!-- 连接控制区 -->
        <div class="flex flex-col items-center mb-8">
            <div class="flex items-center gap-4">
                <input type="text" id="deviceIp" class="border rounded p-2" placeholder="设备IP地址" value="192.168.1.100">
                <button id="connectBtn" class="bg-blue-500 text-white p-2 rounded hover:bg-blue-600 transition-colors">
                    <i class="fas fa-link"></i> 连接设备
                </button>
            </div>
            <div id="statusDisplay" class="connect-status mt-4">
                <i class="fas fa-circle mr-2" id="statusIcon"></i>
                <span id="statusText">等待连接</span>
            </div>
        </div>

        <!-- 控制按钮区 -->
        <div class="grid grid-cols-3 gap-4">
            <!-- 上方向 -->
            <button id="upBtn" class="keyboard-btn bg-gray-200 border-gray-400 hover:bg-gray-300" disabled>
                <i class="fas fa-arrow-up"></i>
            </button>
            <!-- 左方向 -->
            <button id="leftBtn" class="keyboard-btn bg-gray-200 border-gray-400 hover:bg-gray-300" disabled>
                <i class="fas fa-arrow-left"></i>
            </button>
            <!-- 确认 -->
            <button id="clickBtn" class="keyboard-btn bg-red-500 text-white border-red-600 hover:bg-red-600" disabled>
                <i class="fas fa-mouse-pointer"></i>
            </button>
            <!-- 右方向 -->
            <button id="rightBtn" class="keyboard-btn bg-gray-200 border-gray-400 hover:bg-gray-300" disabled>
                <i class="fas fa-arrow-right"></i>
            </button>
            <!-- 下方向 -->
            <button id="downBtn" class="keyboard-btn bg-gray-200 border-gray-400 hover:bg-gray-300" disabled>
                <i class="fas fa-arrow-down"></i>
            </button>
        </div>

        <!-- 键盘控制提示 -->
        <div class="mt-8 text-center text-sm text-gray-600">
            键盘快捷键：<br>
            <span class="font-mono">W</span> 上 | <span class="font-mono">S</span> 下 | <span class="font-mono">A</span> 左 | <span class="font-mono">D</span> 右 | <span class="font-mono">M</span> 点击
        </div>
    </div>

    <script>
        let webSocket = null;
        const statusIcon = document.getElementById('statusIcon');
        const statusText = document.getElementById('statusText');
        const connectBtn = document.getElementById('connectBtn');
        const deviceIpInput = document.getElementById('deviceIp');
        const controlBtns = document.querySelectorAll('[id$=Btn]');

        // 初始化按钮状态
        function updateControlState(enabled) {
            controlBtns.forEach(btn => btn.disabled = !enabled);
            statusIcon.classList.toggle('text-green-500', enabled);
            statusIcon.classList.toggle('text-red-500', !enabled);
            statusText.textContent = enabled ? '已连接' : '等待连接';
        }

        // 连接设备
        connectBtn.addEventListener('click', () => {
            const ip = deviceIpInput.value.trim();
            if (!ip) return;
            
            webSocket = new WebSocket(`ws://${ip}:81`);
            webSocket.addEventListener('open', () => {
                connectBtn.textContent = '断开连接';
                updateControlState(true);
            });
            webSocket.addEventListener('close', () => {
                connectBtn.textContent = '连接设备';
                updateControlState(false);
            });
            webSocket.addEventListener('error', () => {
                connectBtn.textContent = '连接设备';
                updateControlState(false);
            });
        });

        // 按钮点击处理
        function sendCommand(cmd) {
            if (webSocket && webSocket.readyState === WebSocket.OPEN) {
                webSocket.send(cmd);
            }
        }
        document.getElementById('upBtn').addEventListener('click', () => sendCommand('u'));
        document.getElementById('downBtn').addEventListener('click', () => sendCommand('d'));
        document.getElementById('leftBtn').addEventListener('click', () => sendCommand('l'));
        document.getElementById('rightBtn').addEventListener('click', () => sendCommand('r'));
        document.getElementById('clickBtn').addEventListener('click', () => sendCommand('m'));

        // 键盘快捷键支持
        document.addEventListener('keydown', (e) => {
            const keyMap = {
                'w': 'u', 's': 'd', 'a': 'l', 'd': 'r', 'm': 'm',
                'ArrowUp': 'u', 'ArrowDown': 'd', 'ArrowLeft': 'l', 'ArrowRight': 'r'
            };
            const cmd = keyMap[e.key.toLowerCase()];
            if (cmd) {
                e.preventDefault();
                sendCommand(cmd);
            }
        });
    </script>
</body>
</html>
